<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>温湿度显示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/extra-pages.css">
	
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript">
    	var wsuri = "ws://127.0.0.1:8080/springMVC_demo/getServer";
    	var ws = null;
    	function startWebSocket() {
        	if ('WebSocket' in window){
        		ws = new WebSocket(wsuri);
        	}
        	else if ('MozWebSocket' in window){
            	ws = new MozWebSocket(wsuri);
        	}
        	else{
        		console.error("not support WebSocket!");
        	}
        	ws.onmessage = function(evt) {
            	var data = evt.data.split("----");
            	var content = "<tr>";
            	for(var i=0;i<data.length;i++){
            		content += ("<td>"+data[i]+"</td>");
            	}
            	content += "</tr>";
            	$("#tempBody").append(content).fadeIn(2000);
        	};

        	ws.onclose = function(evt) {
            	console.info(evt);
        	};

        	ws.onopen = function(evt) {
            	console.info(evt);
        	};
    	};
    </script>
    <script type="text/javascript">
    $(function () {
    	startWebSocket();
    });
    </script>
    
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse" >
                <div id="nt-title-container" class="navbar-left running-text visible-lg" style="margin-left:250px;">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>

                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                    <!-- <ul id="nt-title">
                        <li><i class="wi-day-lightning"></i>&#160;&#160;Berlin&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>
                        <li><i class="wi-day-lightning"></i>&#160;&#160;Yogyakarta&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; Tonight- 72 °F (22.2 °C)
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Sttugart&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Muchen&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Frankurt&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>
                    </ul> -->
                </div>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
         <!-- <h1>&nbsp;&nbsp;&nbsp;微分电子</h1> -->
         <img alt="" src="microsec/logo.png" style="margin-top: 15px;">
        </div>

        <a id="toggle" style="display:none">
            <span class="entypo-menu"></span>
        </a>

        <div class="search-hover">
            <form id="demo-2">
                <input type="search" placeholder="Search Menu..." class="id_search">
            </form>
        </div>

        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">

                        <li>
                            <a class="tooltip-tip ajax-load" href="index1.html" title="Blog App">
                                <i class="icon-document-edit"></i>
                                <span>温度显示</span>
                            </a>
                        </li>
                        
                        <li>
                            <a class="tooltip-tip ajax-load" href="index2.html" title="Social">
                                <i class="icon-feed"></i>
                                <span>报警控制</span>
                            </a>
                        </li>
                        
                        <li>
                            <a class="tooltip-tip ajax-load" href="index3.html" title="Media">
                                <i class="icon-camera"></i>
                                <span>远程抄表</span>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->

    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">

            <div class="content-wrap">
                <div class="page-extra">

                    <!-- Main content -->
                    <section class="content invoice">
                        <!-- title row -->
                        <div class="row">
                            <div class="col-xs-12 invoice-header">
                                <h2 class="page-header">
                                    <i class="fa fa-globe"></i>
                                    	温湿度显示
                                </h2>
                            </div>
                        </div>

                        <!-- Table row -->
                        <div class="row">
                            <div class="col-xs-12 table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>时间</th>
                                            <th>温度</th>
                                            <th>传感器id</th>
                                            <th>来源</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tempBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.row -->

                    </section>
                    <!-- /.content -->
                </div>
            </div>
            <!-- /END OF CONTENT -->

        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>

</body>

</html>
